<template>
  <div class="amap-page-container"
    style="height: 100%">
    <el-amap ref="map"
      class="amap-demo"
      :center="center"
      :zoom="zoom"
      :map-style="defaultMap"
      view-mode="3D"
      @init="init"
      @mousewheel="changeZoom">
      <!-- 卫星图层 -->
      <el-amap-layer-satellite :visible="showLayer"></el-amap-layer-satellite>

      <el-amap-marker v-for="(item, index) in deviceMarker"
        :key="index"
        :position="item.position"
        :icon="item.icon"
        :offset="item.offset"
        @init="initMarker"
        :content="setIcon(item)">
      </el-amap-marker>
      <!-- :content="setIcon(item)" -->

      <!-- 缩放工具 -->
      <el-amap-control-tool-bar :visible="true"
        :position="{
          top: '0.8vh',
          left: '0.5vw',
          opacity: '0.8',
        }"
        @show="showControl"></el-amap-control-tool-bar>

      <!-- 地图类型 -->
      <div class="map-type">
        <div class="list"
          @mouseleave="onMouseLeaveCurrentMapType()"
          @mouseenter="onMouseEnterCurrentMapType()"
          v-if="isShowCurrentMapType">
          <div class="light">
            <img class="map-type-img"
              :src="mapTypeList[mapType - 1].selectedUrl" />
          </div>
        </div>
        <div class="select"
          v-if="!isShowCurrentMapType"
          @mouseleave="onMouseLeaveCurrentMapType()">
          <div class="light"
            style="flex: 1"
            v-for="item in mapTypeList"
            :key="item.id"
            @click="clickMapType(item)">
            <el-tooltip effect="dark"
              :content="item.title"
              placement="top-start">
              <img class="map-type-img"
                :src="mapType == item.id ? item.selectedUrl : item.url"
                :style="{
                  border: mapType == item.id ? '2px solid #3dbb99' : 'none',
                  'border-radius': mapType == item.id ? '2px' : '0px',
                }" />
            </el-tooltip>
          </div>
        </div>
      </div>
    </el-amap>
  </div>
</template>

<script>
export default {
  name: 'MapModel',
  props: {
    systemMsg: {
      type: Object,
      default: null,
    },
  },
  data () {
    return {
      map: null, //初始化地图
      center: [108.279271, 22.859303],
      zoom: 18,

      defaultMap: 'amap://styles/dark',
      showLayer: false,
      mapType: 3, // 默认卫星地图
      mapTypeList: [
        {
          url: require('@/assets/index-map/standard.png'),
          selectedUrl: require('@/assets/index-map/standard_selected.png'),
          title: '标准',
          id: 1,
          isDisplay: false,
        },
        {
          url: require('@/assets/index-map/real_scene.png'),
          selectedUrl: require('@/assets/index-map/real_scene_selected.png'),
          title: '实景',
          id: 2,
          isDisplay: true,
        },
        {
          url: require('@/assets/index-map/phantom_black.png'),
          selectedUrl: require('@/assets/index-map/phantom_black_selected.png'),
          title: '幻影黑',
          id: 3,
          isDisplay: false,
        },
      ],
      isShowCurrentMapType: true,

      deviceMarker: [],

      deviceTypeList: [
        {
          label: '温感',
          value: 1,
          imgName: 'device_temperature_sensation',
        },
        {
          label: '烟感',
          value: 2,
          imgName: 'device_smoke_sensation',
        },

        {
          label: '手报',
          value: 3,
          imgName: 'device_hand_newspaper',
        },
        {
          label: '天然气',
          value: 37,
          imgName: 'device_natural_gas',
        },
        {
          label: '其他',
          value: -1,
          imgName: 'device_other',
        },
      ],
    }
  },
  methods: {
    // 经纬度换算：百度-->高德
    lnglat_cal (lng, lat) {
      let x = lng - 0.0065,
        y = lat - 0.006,
        x_pi = (3.14159265358979324 * 3000.0) / 180.0

      let z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * x_pi)
      let theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * x_pi)
      let tempLon = z * Math.cos(theta)
      let tempLat = z * Math.sin(theta)
      return { lng: tempLon, lat: tempLat }
    },

    // 初始化地图
    init (map) {
      map.setZooms([2, 19])
      this.map = map
      if (
        this.systemMsg.lon &&
        this.systemMsg.lat &&
        this.systemMsg.lon != '' &&
        this.systemMsg.lat != '' &&
        this.systemMsg.lon != 'null' &&
        this.systemMsg.lat != 'null' &&
        this.systemMsg.lon != '0.0' &&
        this.systemMsg.lat != '0.0'
      ) {
        let trans = this.lnglat_cal(this.systemMsg.lon, this.systemMsg.lat)
        this.map.setCenter([trans.lng, trans.lat])

        let imgPrefix = 'device_other'
        this.deviceTypeList.forEach((item) => {
          if (item.value == Number(this.systemMsg.deviceType)) {
            imgPrefix = item.imgName
          }
        })


        let imgStr = ''
        if (
          this.systemMsg && ((this.systemMsg.alarmName && this.systemMsg.alarmName.indexOf('报警') > -1) ||
            (this.systemMsg.alarmName && this.systemMsg.alarmName.indexOf('火警'))) > -1
        ) {
          imgStr = imgPrefix + '_' + 'alarm'
        } else {
          imgStr = imgPrefix + '_' + 'fault'
        }


        this.deviceMarker = []
        this.deviceMarker.push({
          icon: require(`../../assets/alarm-dialog/${imgStr}.png`),
          offset: new AMap.Pixel(-19, -32),
          position: [trans.lng, trans.lat],
        })
      }
    },
    // 监听地图层级变化
    changeZoom (zoom) {
      // let temp = this.map.getZoom()
      // if (temp < 19) {
      //   this.infoWindow = false
      // }
    },
    // 比例尺
    showControl () { },

    // 地图类型切换
    clickMapType (item) {
      this.mapType = item.id
      // this.showLayer = false
      switch (item.id) {
        case 1:
          this.showLayer = false
          this.defaultMap = 'amap://styles/normal'
          break
        case 2:
          this.defaultMap = 'amap://styles/dark'
          this.showLayer = true
          break
        case 3:
          this.showLayer = false
          this.defaultMap = 'amap://styles/dark'
          break
      }
      this.isShowCurrentMapType = true
    },
    onMouseEnterCurrentMapType () {
      this.isShowCurrentMapType = false
    },
    onMouseLeaveCurrentMapType () {
      this.isShowCurrentMapType = true
    },

    initMarker (marker) { },
    // 标记样式
    setIcon (item) {
      var content = document.createElement('img')
      content.src = item.icon
      content.className = 'twinkle'
      return content
    },
  },
}
</script>

<style lang="scss" scoped>
.amap-demo {
  height: 100%;
}

::v-deep .amap-logo {
  display: none;
  opacity: 0 !important;
}

::v-deep .amap-copyright {
  opacity: 0;
}

.map-type {
  position: absolute;
  left: 0.5vw;
  top: calc(0.8vh + 70px);
  cursor: pointer;
  display: flex;
  opacity: 0.9;

  .list {
    position: absolute;
    display: flex;
    width: 40px;
    height: 40px;
    left: 0;
    background: #fff;
    border-radius: 2px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.15);
    z-index: 0;
  }

  .light {
    width: 34px;
    height: 34px;
    margin: 5px 3px 2px 3px;
    font-weight: 300 !important;
  }

  .map-type-img {
    width: 34px;
    height: 32px;
    vertical-align: top;
  }

  .select {
    position: absolute;
    left: 0;
    height: 40px;
    width: 120px;
    background: #fff;
    border-radius: 2px;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.24);
    z-index: 801;
    display: flex;
  }
}

::v-deep .twinkle {
  animation: star 1.5s ease-in infinite;
}

@keyframes star {
  0% {
    opacity: 0.5;
    filter: alpha(opacity=50);
    transform: scale(1);
  }

  50% {
    opacity: 1;
    filter: alpha(opacity=100);
    transform: scale(1.1);
  }

  100% {
    opacity: 0.5;
    filter: alpha(opacity=50);
    transform: scale(1);
  }

  // 0% {
  //   opacity: 1;
  // }

  // 100% {
  //   opacity: 0;
  // }
}</style>
